<template>
	<view class="u-page">
		<u-subsection :list="catelist" :current="current" @change="sectionChange"></u-subsection>
		<view class="list">
			<block v-for="(item,index) in list" :key="index">		
				<u-cell customStyle="background:#fff;" :isLink="false" @click="openRecharge(item)">
					<view slot="title">
						{{item.coupon.title}}
					</view>
					<view slot="label">
						<view style="font-size: 24rpx;color: darkgray;">
						<text v-if="item.customer.customer_type=='company'">{{item.customer.name}}</text>
						<text v-if="item.customer.customer_type=='family'">{{item.customer.address}}</text>
						</view>
					</view>
					<view slot="value">
						<text class="tag-info" v-if="item.coupon.type=='card'">￥{{item.balance}}</text>
						<text class="tag-info" v-if="item.coupon.type=='goods'">{{item.total-item.take}}次</text>
					</view>
				</u-cell>
			</block>	
			<view v-if="list.length==0">
				<u-empty text="没有卡券!" mode="search" marginTop="150"></u-empty>
			</view>
		</view>
		<view class="plusbtn" @click="goAdd('')">
			<u-icon name="plus" size="24" color="#fff"></u-icon>
		</view>
		<view class="searchbtn" @click="showSearch=true;">
			<u-icon name="search" size="24" color="#fff"></u-icon>
		</view>
		<u-popup :show="recharge.show" @close="recharge.show=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
			<view class="search">
				<view class="title" v-if="recharge.detail">
					<text v-if="recharge.detail.customer.customer_type=='company'">{{recharge.detail.customer.name}}</text>
					<text v-if="recharge.detail.customer.customer_type=='family'">{{recharge.detail.customer.address}}</text>
					<text style="padding-left: 10rpx;"> - 余额￥{{recharge.detail.balance}}</text>
				</view>
				<view class="value" style="width: 100%;">
					<u-radio-group v-model="recharge.type">
						<view class="radiobox">
						<u-radio label="增加金额" name="add" customStyle="height:60rpx;"></u-radio>
						<u-radio label="减少金额" name="minus" customStyle="height:60rpx;"></u-radio>
						<u-radio label="最终金额" name="last" customStyle="height:60rpx;"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<u-input placeholder="请输入充值金额" v-model="recharge.money"/>			
				<u-button type="primary" size="small" @click="confirmRecharge" customStyle="margin-top:20rpx;">充值</u-button>
			</view>
		</u-popup>
		<u-popup :show="showSearch" @close="showSearch=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
			<view class="search">
				<u-input placeholder="请输入客户名称" v-model="keywords"/>
				<u-button type="primary" size="small" @click="search" customStyle="margin-top:20rpx;">查询</u-button>
				<u-button type="warning" size="small" @click="reset" customStyle="margin-top:20rpx;">重置</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				catelist:['充值卡','代金券','折扣券','满减券','商品券'],
				catetype:{
					card:0,
					cash:1,
					discount:2,
					full_minus:3,
					goods:4
				},
				current:0,
				endData:false,
				page:1,
				list:[],	
				keywords:'',
				showSearch:false,
				recharge:{
					show:false,
					type:'add',
					detail:'',
					money:''
				}
			}
		},
		onPullDownRefresh() {
			this.list=[];
			this.page=1;
			this.endData=false;
			this.pagelist(true);
		},
		onReachBottom() {
			this.pagelist();
		},
		onLoad(e) {
			this.current=e.type?this.catetype[e.type]:0;
			this.pagelist();
		},
		filters:{
			
		},
		methods: {
			...methods,
			confirmRecharge:function(){
				this.$post("admin/customer/recharge",{
					coupon_list_id:this.recharge.detail.id,
					type:this.recharge.type,
					money:this.recharge.money
				},true).then(res=>{
					this.recharge.show=false;
					this.search();		
				});		
			},
			openRecharge:function(e){
				if(e.coupon.type=='card'){
					this.recharge.detail=e;
					this.recharge.show=true;
				}
			},
			goAdd:function(e){
				if(e){
					uni.setStorageSync('setCustomer',e.customer);
				}
				this.$navigateTo('admin/addCard');
			},
			sectionChange:function(i){
				this.current=i;
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist();
			},
			reset:function(pulldown=false){
				this.showSearch=false;
				this.keywords='';
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist(pulldown);		
			},
			search:function(){
				this.showSearch=false;
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist();		
			},
			pagelist:function(pulldown=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				let type;
				for(let key in this.catetype){
					if(this.catetype[key]==this.current){
						type=key;
						break;
					}
				}
				this.$get("admin/customer/card",{
					type:type,
					keywords:this.keywords,
					page:this.page
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}
					if(res.length<10){
						this.endData=true;
					}
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			}
		}
	}
</script>

<style lang="scss">
.list{
	padding: 20rpx;
	font-size: 24rpx;
	.orderDetail{
		min-height: 100rpx;
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		box-shadow: 0rpx 0rpx 20rpx #bebebe;
		padding: 20rpx;
		.top{
			display: flex;
			justify-content: space-between;
		}
		.line{
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}
		.btn-group{
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			margin-left: 80%;
			width: 20%;			
		}
	}
}
.plusbtn{
	position: fixed;
	bottom: 40rpx;
	right: 20rpx;
	background-color: #3f9ad7;
	border-radius: 50%;
	padding: 8rpx;
	z-index: 999;
}
.searchbtn{
	position: fixed;
	bottom: 120rpx;
	right: 20rpx;
	background-color: #3f9ad7;
	border-radius: 50%;
	padding: 8rpx;
	z-index: 999;
}
.search{
	padding: 20rpx;
}
.title{
	height: 60rpx;
}
.radiobox{
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 20rpx;
}
</style>
